<template>
  <!-- 红包专区 -->
  <view class="hb-box">
    <view class="hb-ta">
      <view class="ta"></view>
      <!-- 顶部导航 -->
      <view class="ta-b"
        ><view class="left"
          ><uv-icon
            name="arrow-left"
            size="30"
            color="#fff"
            @click="back"
          ></uv-icon
        ></view>
        <view class="ta-te">红包专区</view></view
      >
      <!-- 搜索和签到功能 -->
      <view class="hb-text">
        <view class="ht-te">
          <uv-input
            prefixIcon="search"
            placeholder="请输入您要搜索的内容"
            border="surround"
            v-model="value"
            @change="change"
            shape="circle"
          ></uv-input>
        </view>
        <view class="ht-qian"
          ><uv-icon
            name="calendar"
            size="20"
            color="#fff"
            @click="qian()"
          ></uv-icon
          >签到</view
        >
      </view>
      <!-- 轮播图 -->
      <view class="swiper">
        <uv-swiper
          :list="list"
          indicator
          indicatorMode="line"
          circular
          indicatorActiveColor="#fb4525"
          height="150"
        ></uv-swiper>
      </view>
    </view>
    <!-- 列表 -->
    <view class="hb-bot">
      <view class="ckgd"
        ><image src="../../static/cak.png" mode="scaleToFill"
      /></view>
      <view class="ho-ce">
        <!-- 导航 -->
        <view class="hc-ti">
          <uv-tabs :list="list2" lineColor="#fb4a2a"></uv-tabs>
        </view>
        <!-- 内容 -->
        <view class="hc-cent">
          <view
            class="hc-list"
            v-for="(item, index) in splist"
            :key="index"
            @click="ne()"
          >
            <image :src="item.image" mode="scaleToFill" />
            <view class="hl-name">
              <view class="zy">{{ item.zy }}</view
              >{{ item.ji }}
            </view>
            <view class="hl-hb">
              <view class="hb-le">{{ item.hb }}</view>
              <view class="hb-ri">{{ item.hq }}</view>
            </view>
            <view class="hl-pr">{{ item.jg }}+{{ item.jg2 }}</view>
            <view class="hl-prj">
              <view class="hp-le">{{ item.jg3 }}</view>
              <view class="hp-ri">月销{{ item.yx }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      splist: [
        {
          image: "../../static/商品名称.png",
          zy: "自营",
          ji: "耐克NIKE 男子 休闲鞋 气垫运动鞋",
          hb: "红包已领",
          hq: "￥60.00",
          jg: "60红包",
          jg2: "￥26.00",
          jg3: "￥128",
          yx: "180",
        },
        {
          image: "../../static/商品名称.png",
          zy: "自营",
          ji: "耐克NIKE 男子 休闲鞋 气垫运动鞋",
          hb: "红包已领",
          hq: "￥60.00",
          jg: "60红包",
          jg2: "￥26.00",
          jg3: "￥128",
          yx: "180",
        },
        {
          image: "../../static/商品名称.png",
          zy: "自营",
          ji: "耐克NIKE 男子 休闲鞋 气垫运动鞋",
          hb: "红包已领",
          hq: "￥60.00",
          jg: "60红包",
          jg2: "￥26.00",
          jg3: "￥128",
          yx: "180",
        },
        {
          image: "../../static/商品名称.png",
          zy: "自营",
          ji: "耐克NIKE 男子 休闲鞋 气垫运动鞋",
          hb: "红包已领",
          hq: "￥60.00",
          jg: "60红包",
          jg2: "￥26.00",
          jg3: "￥128",
          yx: "180",
        },
        {
          image: "../../static/商品名称.png",
          zy: "自营",
          ji: "耐克NIKE 男子 休闲鞋 气垫运动鞋",
          hb: "红包已领",
          hq: "￥60.00",
          jg: "60红包",
          jg2: "￥26.00",
          jg3: "￥128",
          yx: "180",
        },
        {
          image: "../../static/商品名称.png",
          zy: "自营",
          ji: "耐克NIKE 男子 休闲鞋 气垫运动鞋",
          hb: "红包已领",
          hq: "￥60.00",
          jg: "60红包",
          jg2: "￥26.00",
          jg3: "￥128",
          yx: "180",
        },
      ],
      list: [
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
      ],
      list2: [
        {
          name: "关注",
        },
        {
          name: "推荐",
        },
        {
          name: "电影",
        },
        {
          name: "科技",
        },
        {
          name: "音乐",
        },
        {
          name: "美食",
        },
        {
          name: "文化",
        },
        {
          name: "财经",
        },
        {
          name: "手工",
        },
      ],
    };
  },
  methods: {
    back() {
      uni.switchTab({
         url: '/pages/index/index'
      });
    },
    change(e) {
      console.log("change", e);
    },
    qian() {
      uni.navigateTo({
        url: "/pages/qiandao/qiandao",
      });
    },
    ne() {
      uni.navigateTo({
        url: "/pages/shoplist2/shoplist2",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.hb-box {
  width: 100%;
  .hb-ta {
    width: 100%;
    background: repeating-linear-gradient(to bottom, #fc4424, #f6d4cf);
    .ta {
      width: 100%;
      height: 44px;
    }
    .ta-b {
      width: 95%;
      margin: auto;
      display: flex;
      .left {
        width: 40%;
      }
      .ta-te {
        width: 40%;
        color: white;
      }
    }
    .hb-text {
      width: 95%;
      margin: auto;
      margin-top: 45rpx;
      display: flex;
      justify-content: space-between;
      .ht-te {
        width: 85%;
        background-color: white;
        border-radius: 50rpx;
      }
      .ht-qian {
        width: 10%;
        font-size: 25rpx;
        color: white;
      }
    }
    .swiper {
      width: 95%;
      margin: auto;
      margin-top: 30rpx;
    }
  }

  .hb-bot {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    .ckgd {
      width: 95%;
      margin: auto;
      height: 100rpx;
      padding-top: 30rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .ho-ce {
      width: 95%;
      margin: auto;
      padding-top: 30rpx;
      .hc-cent {
        width: 100%;
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .hc-list {
          width: 48%;
          border-radius: 15rpx;
          background-color: white;
          margin-bottom: 20rpx;
          image {
            width: 100%;
            height: 350rpx;
          }
          .hl-name {
            width: 90%;
            margin: auto;
            margin-top: 20rpx;
            .zy {
              width: 25%;
              background-color: #fc4424;
              color: white;
              text-align: center;
              border-radius: 10rpx;
              float: left;
              margin-right: 20rpx;
            }
          }
          .hl-hb {
            width: 90%;
            margin: auto;
            margin-top: 20rpx;
            display: flex;
            .hb-le {
              width: 35%;
              text-align: left;
              font-size: 25rpx;
              border: 1rpx solid red;
              color: #fc4424;
              border-top-left-radius: 10rpx;
              border-bottom-left-radius: 10rpx;
            }
            .hb-ri {
              width: 35%;
              font-size: 25rpx;
              margin-left: -7rpx;
              text-align: center;
              background-color: #fc4424;
              color: white;
              border-radius: 10rpx;
            }
          }
          .hl-pr {
            width: 90%;
            margin: auto;
            margin-top: 20rpx;
            margin-bottom: 15rpx;
            font-size: 35rpx;
            color: #fc4424;
          }
          .hl-prj {
            width: 90%;
            margin: auto;
            padding-bottom: 20rpx;
            color: silver;
            display: flex;
            justify-content: space-between;
            .hp-le {
              width: 40%;
              text-decoration: line-through;
            }
            .hp-ri {
              width: 50%;
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
